import React, { useContext, useEffect, useState } from 'react';
import { Table, Input, Button } from 'antd';
import {Link} from 'umi';
import { ISkillLabel, ISkillListItem, ISkillListQuery,interviewList } from '@/utils/interface';
import { getSkillLabel, getSkillList,getSkillLists ,getinterviewRecord} from '@/services';
import classNames from 'classnames';
import { EyeOutlined, RollbackOutlined, FormOutlined, DeleteOutlined, DeliveredProcedureOutlined, SearchOutlined } from '@ant-design/icons';
// 直接引入样式
// import './postSkill.less'
// 启用了css module
import styles from './interviewList.less'
import {observer} from 'mobx-react-lite'
import useStore from '@/context/useStore';

import skill from '@/store/modules/skill';

const status = ['全部', '通过', '未通过', '不确定'];
const kong=['通过', '未通过', '不确定']
const have=['有', '无']

const columns = [
    {
        title: '岗位名称',
        align:'center',
        render:(row:interviewList)=><Link to={`/teachers/interviewRecord?interviewId=${row.interviewId}&shield=0&see=true`}>
        {row.stationName}
    </Link>,
    },
    {
        title: '公司名称',
        dataIndex: 'companyName',
        align:'center'

    },
    {
        title: '面试时间',
        dataIndex: 'interviewTime',
        align:'center'

    },
    {
        title: '面试官',
        dataIndex: 'intervierManagement',
        align:'center'

    },
    {
        title: '专业',
        dataIndex: 'majorName',
        align:'center'

    },
    {
        title: '提交人',
        dataIndex: 'commitName',
        align:'center'

    },  {
        title: '面试结果',
        align:'center',
        render: (row: interviewList) => <span className={styles[`status${row.status}`]}>{kong[Number(row.status)]}</span>,
        
    },
    {
        title: '录音文件',
        align:'center',
        render: (row: interviewList) => <span className={styles[`issoundrecord${row.issoundrecord}`]}>{have[Number(row.issoundrecord)]}</span>,


    }
];
const ProManagement: React.FC = props => {
    let [curSkill, setCurSkill] = useState('');
    let [isMyInfo, setMyInfo] = useState(false);
    let [curStatus, setCurStatus] = useState(0);
    let [title, setTitle] = useState('');
    let [searchTitle, setSearchTitle] = useState('');
    let [interviewList, setinterviewList] = useState<interviewList[]>([]);
    let queryParams:ISkillListQuery = { isAsc: 'desc', searchTitle: '', pageNum: 1, pageSize: 10, isMyInfo: false };
    let {InterviewList} = useStore();

    // 发起请求获取专业标签
    useEffect(() => {
       skill.getSkillLabel();
    }, [])
  

    // 发起请求获取项目列表
    useEffect(() => {
        // 拼接下参数
      
        getSkillLists(queryParams).then(res => {
            if (res.code == 200) {
                setinterviewList(res.rows);
            }

        })
    }, [curSkill, curStatus, isMyInfo, searchTitle]);


    // 我的页面:孔大语
    return <div className={styles.postskill}>
    <div className={styles.box}>
        <section className={styles.post}>
            <section className={styles.major}>
                <h2>专业：</h2>
                <ul className={styles.statusList}>{
                [{ id: '', name: '全部' }, ...skill.skillLabel].map(item => {
                    return <span className={item.id === curSkill ? classNames(styles.span, styles.active) : styles.span} onClick={e => setCurSkill(item.id)} key={item.id}>{item.name}</span>
                })
            }</ul>
            </section>
            <section className={styles.state}>
                <h2>面试结果：</h2>
                <ul>
                    {
                        status.map((item, index) => {
                            return <span className={index === curStatus ? classNames(styles.active) : ''} key={item} onClick={e => setCurStatus(index)}>{item}</span>
                        })
                    }
                </ul>
            </section>
        </section>

        <div className={styles.table}>
            <div className={styles.search}>
           {/* //模糊搜索 */}
                <Input style={{width:'210px',height:'35px',cursor:'pointer'}} className={styles.input} placeholder="搜索岗位/岗位名称" suffix={<SearchOutlined onClick={()=>setSearchTitle(title)}/>} value={title} onChange={e=>setTitle(e.target.value)} onKeyDown={e=>{
                    if (e.keyCode === 13){
                        setSearchTitle(title)
                    }
                }}/>
             
            </div>
            <Table className={styles.table} rowKey='interviewId' dataSource={interviewList} columns={columns as any} />
        </div>
    </div>
</div>
}
export default observer(ProManagement)